<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        title="添加住户授权"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="住户" prop="member_sn">
                <el-select v-model="formData.member_sn" placeholder="请选择住户" @change="memberChange"
                    :remote-method="remoteMethod" filterable :remote="formData.checked == false" reserve-keyword default-first-option :loading="loading">
                    <el-option v-for="item in userData" :key="item.member_sn" :label="item.member_xm"
                        :value="item.member_sn"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二维码" v-if="formData.door_qrcode == '1'">
                {{ formData.door_qrcode == '1' ? '开通' : '未开通' }}
             </el-form-item>
             <el-form-item label="卡号"  v-if="formData.door_card !== ''">
                 {{formData.door_card}}
             </el-form-item>
             <el-form-item label="临时密码"  v-if="formData.door_pwd !== ''">
                 {{formData.door_pwd}}
             </el-form-item>
             <el-form-item label="人脸" prop="face_thumb" v-if="formData.face_thumb !== ''">
                 <el-image style="width: 120px; height: 120px" :src="formData.face_thumb" fit="contain"></el-image>
             </el-form-item>
             <el-form-item label="有效期" prop="end_time">
                 <el-date-picker v-model="formData.end_time" value-format="yyyy-MM-dd" placeholder="请选择有效期"
                     :pickerOptions="pickerOptions"></el-date-picker>
             </el-form-item>
             <el-form-item label="梯控" prop="door_sn">
                 <el-select multiple v-model="formData.door_sn" placeholder="请选择授权梯控">
                     <el-option v-for="item in ladderSourceData" :key="item.door_sn" :label="item.door_name"
                         :value="item.door_sn"></el-option>
                 </el-select>
             </el-form-item>           
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter } from 'vuex-class';
import { mixinDialogForm } from '@/mixin/dialog/Form';
import { mixinTime } from '@/mixin/Time';
import { mixinNext } from '@/mixin/Next';
import { cardMixin } from '@/mixin/CardMixin';
import { find } from 'lodash';
@Component({
    mixins: [mixinTime, mixinDialogForm, mixinNext, cardMixin]
})
export default class equipmentLadderScripUser extends Vue {
    // 续期
    @Action('equipmentLadderscrip/holderAdd') itemAdd: any;
    @Getter('sharing/cardType') typeData: any;

    @Action('parkFloor/all') getFloor: any;
    @Action('parkBuilding/buildAll') getBuild: any;
    @Getter('parkBuilding/buildAll') buildingData: any;
    @Action('parkRoom/list') getRoom: any;
    @Action('equipmentLadder/list') getLadder: any;
    @Action('parkTenant/room') getUser: any;
    @Action('parkTenant/list') getUser2: any;

    // 表单数据
    formData: any = {
        checked: false,
        build_sn: '',
        floor_sn: '',
        member_sn: '',
        room_sn: '',
        door_card: "",
        door_pwd: '',
        face_thumb: '',
        door_qrcode: "",
        end_time: "",
        door_sn: []
    };

    remoteMethod(member_xm = '') {
        const me = this as any;
        if (member_xm.length < 1) {
            this.userData = [];
        } else {
            me.getUser2({ member_xm: member_xm, per_page: 100 }).then(({ data }) => {
                this.userData = data;
            });
        }

    }
    loading: any = false;
    memberChange(member_sn: any) {
        const me = this as any;
        const item = find(me.userData, { member_sn });
        console.log(item);
        me.formData.door_qrcode = item.door_qrcode.toString();
        me.formData.door_card = item.door_card;
        me.formData.door_pwd = item.door_pwd;
        me.formData.face_thumb = item.face_thumb;
    }

    scripTypeData: any = [];
    created() {
        const me = this as any;
       // me.getBuild();
        me.remoteLadderData()
       //  me.scripTypeData = this.typeData.filter((item) => item.item_value != 0);
    }

    ladderSourceData: any = [];
    @Action('equipmentLadder/list') ladderDataList: any;
    remoteLadderData() {
        const me = this as any;
        me.ladderDataList({ page: 1, per_page: 100 }).then(({ data }) => {
            me.ladderSourceData = data;
        });
    }

    floorData: any = [];
    @Watch('formData.build_sn')
    updateBuilding(build_sn: any) {
        const me = this as any;
        me.updateNext(
            me.getFloor,
            { build_sn },
            'floorData',
            'formData.floor_sn',
            {
                queryName: 'floor_sn'
            }
        );
    }
    roomData: any = [];
    @Watch('formData.floor_sn')
    updateFloor(floor_sn: any) {
        const me = this as any;
        me.updateNext(
            me.getRoom,
            { floor_sn },
            'roomData',
            'formData.room_sn',
            {
                queryName: 'room_sn'
            }
        );
    }
    userData: any = [];
    @Watch('formData.room_sn')
    updateRoom(room_sn: any) {
        const me = this as any;
        me.updateNext(
            me.getUser,
            { room_sn },
            'userData',
            'formData.member_sn',
            {
                queryName: 'member_sn'
            }
        );
    }

    pickerOptions: any = {
        shortcuts: [
            {
                text: '一个月',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 1);
                    picker.$emit('pick', end);
                }
            },
            {
                text: '三个月',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 3);
                    picker.$emit('pick', end);
                }
            },
            {
                text: '六个月',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 6);
                    picker.$emit('pick', end);
                }
            },
            {
                text: '一年',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 12);
                    picker.$emit('pick', end);
                }
            }
        ]
    };

    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        room_sn: [
            {
                required: true,
                message: '请选择房间'
            }
        ],
        member_sn: [
            {
                required: true,
                message: '请选择住户'
            }
        ],
        end_time: [
            {
                required: true,
                message: '请选择有效期',
                trigger: 'blur'
            }
        ]
    };
}
</script>
